<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐写测试</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='js/navigation.js')}}"> </script>
    <script src="{{ url_for('static', filename='js/datahide.js')}}"> </script>
</head>
<body>

    <div id="navigation"></div>
<div class="container">
<!--TODO: 图片上传的UI优化                      -->
<!--TODO: 选择隐写位数的UI优化                  -->
<!--TODO: 隐写结果展示页面优化。(直接在原页面展示隐写后的图片并提供下载按钮)-->
      <h3>{% block title %}{% endblock %}</h3>
      <!-- <h3>上传本地图片或wav音频并处理</h3> -->
    <div class="row">
        <div class="col-md-6">
            <h4> 隐写 </h4>
            <form method='POST' enctype="multipart/form-data" >
                <div style="width: 300px; height: 100px; border: 1.5px dashed gray;">
                    <input type="file" style="display:inline; width:100%; height:100%;" name="file1"/>
                </div>
                <br>
                <h4>任选一个秘密数据类型进行嵌入</h4>
                <div class="input-group input-group-lg">
                   <h4>1.文本型</h4>
                    <input type="text" class="form-control" aria-describedby="sizing-addon1" name="secret_text">
                </div>
                <h4>2.文件型</h4>
          <input type="file" name="secret_file" >
           <br>
                <br>
              {% block customConfigHide %}{% endblock %}
                <br>
            <input type="button" value="隐写" class="button-new" onclick="hide('{% block algName %}{% endblock %}')"/>
                <button onclick="clearData()">清除信息</button>
                <h1 id="method_hide"></h1>
                <span id="info"></span>
            </form>
        </div>
        <div class="col-md-6">
            <h4> 提取 </h4>
            <form method='POST' enctype="multipart/form-data" >
              <div id="uploadfile" style="width: 300px; height: 100px; border: 1.5px dashed gray;">
                  <input type="file" name="file2" id="fileInput"/>
              </div>
                <br>
              {% block customConfigExtract %}{% endblock %}
                <br>
                <span>秘密数据</span>
                <br>
                <textarea id="text-extract" type="text" name="secrets" disabled="disabled"  v-model="text" class="sign" placeholder="提取的消息"></textarea>

               <br>
            <input type="button" value="提取" onclick="extract('{{ self.algName() }}')" class="button-new" />
                <button onclick="clearData()">清除信息</button>
                <button onclick="copyData()">复制信息</button>
                <h3>{{message}}</h3>
            </form>
        </div>
    </div>
</div>
</body>
</html>
